import React, {useContext} from 'react';
import {View, Image, Alert, ScrollView, Platform} from 'react-native';
import dayjs from 'dayjs';
import Toast from 'react-native-root-toast';
import {useNavigation} from '@react-navigation/native';
import {useMount, useSafeState} from 'ahooks';
import {Button, Text, ListItem, Input} from '@rneui/base';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import {useSelector, useDispatch} from 'react-redux';
import GlobalContext from '@/GlobalContext';
import {ApiHost, OssHost} from '@/config/common';
import {setKeyGetAccountInfo} from '@/store';
const leftIconSize = 18;
const rightIconSize = 20;

import HeaderStyle1 from '@/components/HeaderStyle1';
import globalStyle from '@/style/global.less';

export default () => {
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const token = useSelector(state => state.token.value);
  const accountInfo = useSelector(state => state.accountInfo.value);
  let defaultNickname = accountInfo?.j_ext_info?.nickname;

  const [submitLoading, setSubmitLoading] = useSafeState(false);
  const [nickname, settNickname] = useSafeState(defaultNickname);
  const isAllowSubmit = defaultNickname !== nickname;
  const submit = async ({nickname}) => {
    setSubmitLoading(true);
    try {
      let rsObj = undefined;
      try {
        const reqFormData = {
          nickname: nickname,
        };
        let res = await fetch(`${ApiHost}/account/json/save-account-info`, {
          headers: {
            'content-type': 'application/json',
            token: token,
          },
          method: 'POST',
          body: JSON.stringify(reqFormData),
        });
        rsObj = await res.json();
        setSubmitLoading(false);
      } catch (e) {
        setSubmitLoading(false);
        Alert.alert('操作失败', e.message);
        return;
      }
      if (!rsObj) {
        Alert.alert('操作失败', '!rsObj');
        return;
      }
      const {code = 0, msg} = rsObj || {};
      if (code <= 0) {
        Alert.alert('操作失败', msg);
        return;
      }

      dispatch(setKeyGetAccountInfo(Math.random()));

      let toast = Toast.show(msg, {
        // duration: Toast.durations.LONG,
        duration: 500,
        // position: Toast.positions.CENTER,
        position: 150,
        shadow: true,
        animation: true,
        hideOnPress: true,
        delay: 0,
        onHide: () => {
          navigation.goBack();
        },
      });
    } catch (e) {
      Alert.alert('系统繁忙', '操作失败');
    }
  };
  return (
    <>
      <View
        style={{
          flex: 1,
        }}>
        <HeaderStyle1
          headerRight={() => (
            <View
              style={{
                marginRight: 10,
                minWidth: 80,
              }}>
              <Button
                size="sm"
                onPress={() => {
                  submit({nickname});
                }}
                disabled={!isAllowSubmit}
                loading={submitLoading}>
                保存
              </Button>
            </View>
          )}>
          设置昵称
        </HeaderStyle1>
        <ScrollView
          style={[
            globalStyle.boxViewBasic,
            {
              flex: 1,
            },
          ]}>
          <Input
            placeholder="请输入"
            defaultValue={defaultNickname}
            onChangeText={settNickname}
            maxLength={100}
          />
          <Text style={{textAlign: 'center', color: '#666'}}>
            好的昵称能让人更容易记住你
          </Text>
        </ScrollView>
      </View>
    </>
  );
};
